<!--
 * @Author: Aaron
 * @Date: 2022-05-06 13:32:34
 * @LastEditors: yanMeng
 * @LastEditTime: 2022-07-19 17:22:10
 * @Description: file content
 * @FilePath: \ias_ui\src\views\JDSupermarket\index\productDetails.vue
 * @Company: 沃尔玛
-->
<template>
  <div v-loading="loading" class="product-details">
    <div class="good-info">
      <div class="item">
        <div>UPC(不带检验码)：</div>
        <div>{{ query.upc || '' }}</div>
      </div>
      <div class="item">
        <div>商品名称：</div>
        <div>{{ query.skuName || '' }}</div>
      </div>
      <!-- <div class="item">
        <div>京东商品编号：</div>
        <div>{{ query.jdSkuId || '' }}</div>
      </div> -->
    </div>

    <essTable
      ref="table"
      :thead-list="theadList(isEdit)"
      :other-container-box="otherContainerBox"
      :total="total"
      :data-list="dataList"
      :page-params="pageParams"
      :selectable="selectable"
      @handlePageChange="requestData"
      @selectionChange="selectionChange"
      @delOffer="delOffer"
    >
      <template v-slot:upcStatus="{ scope }">{{ scope | transUpcStatus }}</template>

      <div slot="left" class="mtb-10">
        <search :search-data="searchData" @handleSearch="handleSearch" />
      </div>

      <div v-if="isEdit" slot="right" class="mtb-10">
        <i class="el-icon-refresh" title="点击刷新列表数据" @click="handleSearch" />
        <b>批量操作：</b>
        <el-button size="mini" type="danger" icon="el-icon-delete" round :disabled="!hasSelect" @click="batchDelOffer">删除报价</el-button>
      </div>
    </essTable>
  </div>
</template>

<script>
import search from '../components/search.vue'
import essTable from '@/components/eTable/eTable.vue'
import { productDetailsListHeader as theadList } from '../js/theadList.js'
import { tableParams, searchHeaderEvent } from '@/components/eTable/js/mixins.js'
import { productDetails, delOfferbyStore } from '@/api/JDSupermarket/productsList.js'
import { stringToArray, filterKey } from '@/utils/processingData.js'
import { upcStatus, enumerationUpcStatus } from '../js/dictionary.js'
import { hasEdit } from '../js/hasEdit.js'

export default {
  name: 'JDSupermarketProductDetails',
  components: {
    essTable,
    search
  },
  filters: {
    transUpcStatus({ row }) {
      return filterKey(row.upcStatus, upcStatus)
    }
  },
  mixins: [tableParams, searchHeaderEvent, hasEdit],
  data() {
    return {
      loading: false,
      theadList,
      otherContainerBox: ['.good-info'],
      searchData: {},
      query: this.$route.query,
      storeQuotationInfo: {},
      selectable({ upcStatus }) {
        return Boolean(upcStatus === enumerationUpcStatus.TAKEEFFECT)
      }
    }
  },
  computed: {
    hasSelect() {
      return Boolean(
        Array.isArray(this.multipleSelection) &&
          this.multipleSelection.length &&
          this.multipleSelection.every((_) => _.upcStatus === enumerationUpcStatus.TAKEEFFECT)
      )
    }
  },
  created() {
    this.requestData()
  },
  methods: {
    handleSearchData() {
      const regExp = new RegExp(/\D/, 'g')
      const searchData = JSON.parse(JSON.stringify({ ...this.searchData, ...this.pageParams, upc: this.query.upc }))
      searchData.pageNum--
      if ('storeNbrList' in searchData) {
        searchData.storeNbrList = stringToArray(searchData.storeNbrList, /[\n\r]/)
        searchData.storeNbrList.forEach((_) => {
          if (regExp.test(_)) throw new Error(`店号只能输入数字，${_} 包含非法字符！`)
          if (_.length > 4) throw new Error(`店号最长4位，${_} 长度大于4！`)
        })
        if (searchData.storeNbrList?.length > 100) throw new Error('店号数量大于100条')
      }
      return searchData
    },

    async requestData() {
      try {
        this.loading = true
        const { code, result } = await productDetails(this.handleSearchData())
        if (code !== '0' || !result) return
        this.total = result.total || 0
        this.dataList = result.data || []
      } catch (e) {
        if (e?.message) this.$message.error(e)
      } finally {
        this.loading = false
      }
    },

    delOffer({ row }) {
      this.batchDelOffer([row])
    },
    batchDelOffer(arr) {
      this.$confirm('删除报价, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.batchDelOfferRequery(Array.isArray(arr) ? arr : this.multipleSelection)
        })
        .catch(() => {})
    },
    async batchDelOfferRequery(arr) {
      try {
        this.loading = true
        const { code } = await delOfferbyStore(arr.map((_) => _.id))
        if (code !== '0') return
        this.$message({
          type: 'success',
          message: '已对该商品发起删除报价操作！'
        })
        this.handleSearch()
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.product-details {
  .good-info {
    display: flex;
    padding: 15px 0;
    margin: 0 20px;
    border-bottom: solid #eee 1px;
    font-size: 14px;
    .item {
      display: flex;
      margin-right: 30px;
      div {
        display: inline-block;
      }
      div:nth-child(1) {
        font-weight: 700;
        word-break: keep-all;
        white-space: nowrap;
        color: #5d5d5d;
      }
      div:nth-child(2) {
        min-width: 100px;
        color: #666;
      }
    }
  }

  .log-good-info {
    margin: 0;
    padding: 10px 0;
  }

  .mtb-10 {
    display: flex;
    align-items: center;
    margin: 15px 0 8px;
  }
}

.el-icon-refresh {
  margin: 0 20px;
  font-size: 22px;
  color: #0071ce;
  cursor: pointer;
}
</style>
